
<!DOCTYPE html>

<html>
<head>   
<link href='http://i1263.photobucket.com/albums/ii623/dek_rif/Blog/th_animated_favicon1.gif?t=1336135599' rel='icon' type='image/x-icon'/>
    <title>jQuery Drop Down Menu Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.otowebsite.blogspot.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
 
  </ul>
</li>
<li><a href="http://www.otowebsite.blogspot.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

<br><br><br>
<a href="http://www.otowebsite.blogspot.com/2012/06/jquery-multi-level-drop-down-menu-v1.html">jQuery Multi Level Drop Down Menu - V1</a> brought to you by <a href="http://www.otowebsite.blogspot.com/">Oto Website</a>

<!-- Start Shareaholic Sassy Bookmarks HTML (helperblogger.com)-->
<div class="shr_ss shr_publisher">

</div>

</body>
<center><div style="position:absolute;bottom:0px;left:30%;right:30%">
  <b><span style="font-size: x-large;"><a href="http://www.otowebsite.blogspot.com/2012/06/jquery-multi-level-drop-down-menu-v1.html" target="_blank"><blink>Back To Tutorial</blink></a></span></b></div></center>    

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
<style type="text/css">/*<![CDATA[*/#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://4.bp.blogspot.com/-GACw7ApUC7Q/T9yn4xcSjjI/AAAAAAAADU0/riFGzBVgF-k/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}/*]]>*/</style><script src="https://making-different.googlecode.com/svn/trunk/right.js" type="text/javascript"></script><div class="mdfbplikebox"><div id="fbplikebox" style="display:none;">    <div class="fbplbadge"></div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fdekrif&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe><span>By <a href="http://www.otowebsite.blogspot.com/">Oto Website</a> / <a href="http://www.otowebsite.blogspot.com/2012/04/cara-membuat-facebook-like-auto-hide-di.html">+Get This!</a></span></div></div>    
    
    

 <script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-red howk.js"></script><script type="text/javascript">
var twitterAccount = "otowebsite";
var tweetThisText = "Read @ Blogger Widgets, Tips, Hacks - Making Different http://www.gj37765.blogspot.com";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.otowebsite.blogspot.com">Oto Website</a></span></noscript>   
</html>